<!-- 完整代码 -->
<template>
  <header>
    <!-- 输入框按钮 -->
    <input
      type="text"
      placeholder="Enter an activity.."
      id="name"
      v-model="list"
      @keyup.enter="bood"
    />
    <!-- 添加按钮 -->
    <button @click="bood" class="nue">
      <svg
        width="50"
        height="50"
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="24"
          cy="26"
          r="20"
          fill="white"
          stroke="none"
          stroke-width="3"
        />
        <text
          x="48%"
          y="58%"
          text-anchor="middle"
          alignment-baseline="middle"
          fill="#25b99a"
          font-size="35"
        >
          +
        </text>
      </svg>
    </button>
  </header>
  <div class="hez">
    <!-- 代办事项 -->
    <ul class="list1">
      <h2>代办事项列表</h2>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <el-button
          @click="setCurrentTodo(todo)"
          class="ano"
          type="success"
          :icon="Check"
          circle
        />
        <el-button
          @click="removeTodo(index)"
          class="opp"
          type="danger"
          :icon="Delete"
          circle
        />
      </li>
    </ul>
    <ul class="list2">
      <button @click="over(index)">清空已完成</button>
      <h2>已完成内容：</h2>
      <li v-for="(comitem, index) in comitems" :key="index">
        {{ comitem }}
      </li>
    </ul>
  </div>
  <div class="get">
    <a href="https://gitee.com/seven-sons-love-seven/togolist.class.git">
      <p>我的仓库地址</p></a
    >
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Check, Delete } from "@element-plus/icons";

// 声明
const list = ref("");
const todos = ref([]);
const comitems = ref([]);

// 触发按钮bood事件
const bood = () => {
  if (!list.value.trim()) {
    return;
  }
  todos.value.push(list.value);
  list.value = "";
  localStorage.setItem("todos", JSON.stringify(todos.value));
};

// 触发按钮删除事件
const removeTodo = (index) => {
  let Delete = window.confirm("您是否确认要删除" + todos.value[index] + "吗？");
  if (Delete) {
    todos.value.splice(index, 1);
  }
  localStorage.setItem("todos", JSON.stringify(todos.value));
};

// 触发按钮完成事件
const setCurrentTodo = (todo) => {
  const index = todos.value.findIndex((i) => i === todo);
  if (index !== -1) {
    todos.value.splice(index, 1);
  }
  comitems.value.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos.value));
  localStorage.setItem("item", JSON.stringify(comitems.value));
};

// 已完成事项
const comitem = () => {
  const comitem = todos.value.splice(index, 1)[0];
  todos.value[index].todos = true;
  comitems.value.push(comitem);
  localStorage.setItem("item", JSON.stringify(comitems.value));
};

const over = () => {
  comitems.value = comitems.value.filter((todo) => !todo);
  localStorage.removeItem("item", JSON.stringify(comitems.value));
};

onMounted(() => {
  const a = JSON.parse(localStorage.getItem("todos"));
  if (localStorage.getItem("todos")) {
    todos.value = JSON.parse(localStorage.getItem("todos"));
  }
  const c = JSON.parse(localStorage.getItem("item"));
  if (localStorage.getItem("item")) {
    comitems.value = JSON.parse(localStorage.getItem("item"));
  }
});
</script>

<style>
body {
  background: #edf0f1;
}

header {
  background-image: linear-gradient(to right, #25b899, #25b99a);
  height: 60px;
  width: 100%;
  position: fixed;
  top: 110px;
  left: 0;
  border-radius: 10px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#name {
  background-image: linear-gradient(to right, #51c7ae, #51c7ae);
  height: 40px;
  width: 100%;
  padding: 0 10px 0 10px;
  border-style: none;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
}

header input::-webkit-input-placeholder {
  color: white;
}

header input:-moz-input-placeholder {
  color: white;
}

header input::-moz-input-placeholder {
  color: white;
}

header input:-ms-input-placeholder {
  color: white;
}

.nue {
  display: inline-block;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  padding: 0px;
}
.opp {
  color: #51c7ae;
  font-size: large;
}
.list1 {
  padding-top: 40px;
  padding-bottom: 10px;
  font-size: large;
  margin-left: 15px;

  h2 {
    font-size: 20px;
  }
}

.list2 {
  padding-top: 6px;
  padding-bottom: 10px;
  font-size: large;
  margin-left: 30px;

  h2 {
    font-size: 20px;
  }
}

.ano {
  color: #51c7;
  font-size: large;
}
.hez {
  display: flex;
  position: fixed;
  justify-content: space-between;
  top: 180px;
  left: 10px;
}
.get {
  display: flex;
  position: fixed;
  top: 180px;
  left: 20px;
  font-size: 20px;
  P {
    color: rgb(255, 0, 0);
  }
}
</style>
@/stores/user
